import { querySession } from '@/services/Session';
import { ProCard } from '@ant-design/pro-components';
import { Avatar, List, Typography } from 'antd';
import { useEffect, useState } from 'react';
import Chat from './Chat';
import './Style/Session.less';

// 解构 Typography 组件中的 Text，用于文本渲染
const { Text } = Typography;

// 定义默认导出组件
export default () => {
  // 定义 isSessionLoading 状态，用于标识会话数据是否正在加载
  const [isSessionLoading, setIsSessionLoading] = useState(false);
  // 定义 sessionList 状态，用于存储会话列表数据
  const [sessionList, setSessionList] = useState<SessionItem[]>([]);
  // 定义 userName 状态，用于存储当前选中用户的用户名
  const [userName, setUserName] = useState<string>();
  // 定义 nickName 状态，用于存储当前选中用户的昵称
  const [nickName, setNickName] = useState<string>();

  // 定义 getSession 方法，用于获取会话列表数据
  const getSession = async () => {
    try {
      setIsSessionLoading(true); // 设置加载状态为 true
      const response = await querySession(); // 调用 API 获取会话数据
      setSessionList(response.data); // 将返回的数据存储到 sessionList 状态
    } catch (error) {
      console.error(error); // 捕获并打印错误信息
    }
    setIsSessionLoading(false); // 设置加载状态为 false
  };

  // 定义 handleMsg 方法，处理用户点击会话列表项的逻辑
  const handleMsg = (item: SessionItem) => {
    setUserName(item.userName); // 更新选中用户的用户名
    setNickName(item.nickName); // 更新选中用户的昵称
  };

  // 使用 useEffect，在组件加载时调用 getSession 方法获取数据
  useEffect(() => {
    getSession();
  }, []);

  // 返回组件的 JSX 结构
  return (
    <ProCard split="vertical">
      {/* 左侧 ProCard，用于显示会话列表 */}
      <ProCard bordered title="聊天列表" colSpan="28%" bodyStyle={{ paddingInline: '0px' }}>
        {/* List 组件用于显示会话列表 */}
        <List
          dataSource={sessionList} // 数据源为会话列表
          className="session-scrollbar" // 应用滚动条样式
          loading={isSessionLoading} // 根据加载状态显示 loading
          renderItem={(item) => (
            <List.Item
              // 点击列表项时调用 handleMsg 方法
              onClick={() => handleMsg(item)}
              // 为选中用户添加高亮样式
              className={`sessionItem ${item.userName === userName ? 'highlighted' : ''}`}
            >
              {/* 渲染会话项的元信息 */}
              <List.Item.Meta
                avatar={<Avatar src={item.headImgUrl} />} // 显示用户头像
                title={<Text ellipsis>{item.nickName}</Text>} // 显示用户昵称，超出部分省略
                description={<Text ellipsis>{item.content}</Text>} // 显示消息内容，超出部分省略
              />
              {/* 显示会话时间 */}
              <Text className="timeText">{item.shortTime}</Text>
            </List.Item>
          )}
        />
      </ProCard>
      {/* 右侧 ProCard，用于显示聊天内容 */}
      <ProCard
        bordered
        title={nickName ? nickName : '~'} // 标题为选中用户的昵称，如果为空则显示 '~'
        headerBordered // 添加标题下边框
        bodyStyle={{ paddingInline: '0px' }} // 设置内边距为 0
      >
        {/* 渲染 Chat 组件，传入选中用户的用户名 */}
        <Chat userName={userName} />
      </ProCard>
    </ProCard>
  );
};
